<template>
    <u-popup
            :show="show"
            @close="closeHandler"
    >
        <view class="u-picker">
            <u-toolbar
                    v-if="showToolbar"
                    :cancelColor="cancelColor"
                    :confirmColor="confirmColor"
                    :cancelText="cancelText"
                    :confirmText="confirmText"
                    :title="title"
                    @cancel="cancel"
                    @confirm="confirm"
            ></u-toolbar>

            <sl-filter :independence="true" :color="titleColor" :themeColor="themeColor" :menuList.sync="menuList" @result="result"></sl-filter>

            <scroll-view class="content" scroll-y>

                <view class="table">
                    <view class="tr bg-w">
                        <view class="th"></view>
                        <view class="th">房号</view>
                        <view class="th ">租金</view>
                        <view class="th">佣金补贴</view>
                        <view class="th">租期</view>
                        <view class="th">设施</view>
                        <view class="th">说明</view>
                    </view>
                    <u-checkbox-group v-model="collections" placement="column">
                    <template v-for="(item,index) in list">
                        <view class="tr" :class="index % 2 == 0 ? 'bg-g' :'' ">
                            <view class="td">
                                <u-checkbox  borderBottom iconPlacement="left" :name="item.id"></u-checkbox>
                            </view>
                            <view class="td" style="font-size: 16rpx">{{item.name}}</view>
                            <view class="td">{{item.lease_priec}}</view>
                            <view class="td">0</view>
                            <view class="td">0</view>
                            <view class="td">0</view>
                            <view class="td">0</view>
                        </view>
                    </template>
                    </u-checkbox-group>
                </view>

                <view class="safe-area-inset-bottom"></view>
            </scroll-view>
        </view>
    </u-popup>
</template>

<script>
    import slFilter from '../../../../components/sl-filter/sl-filter.vue';
    export default {
        name: "SelectHouseOrigin",
        components:{
            slFilter
        },
        props: {
            list: {
                type: Array,
                default: {}
            },
            // 是否展示picker弹窗
            show: {
                type: Boolean,
                default: uni.$u.props.picker.show
            },
            // 是否展示顶部的操作栏
            showToolbar: {
                type: Boolean,
                default: uni.$u.props.picker.showToolbar
            },
            // 顶部标题
            title: {
                type: String,
                default: uni.$u.props.picker.title
            },
            // 取消按钮的文字
            cancelText: {
                type: String,
                default: uni.$u.props.picker.cancelText
            },
            // 确认按钮的文字
            confirmText: {
                type: String,
                default: uni.$u.props.picker.confirmText
            },
            // 取消按钮的颜色
            cancelColor: {
                type: String,
                default: uni.$u.props.picker.cancelColor
            },
            // 确认按钮的颜色
            confirmColor: {
                type: String,
                default: uni.$u.props.picker.confirmColor
            },
            // 是否允许点击遮罩关闭选择器
            closeOnClickOverlay: {
                type: Boolean,
                default: uni.$u.props.picker.closeOnClickOverlay
            },

        },
        data(){
            return {
                collections:[],
                menuList: [{
                    'title': '全部小区',
                    'detailTitle': '请选择小区',
                    'isMutiple': false,
                    'key': 's_id',
                    'defaultSelectedIndex': [],
                    'detailList': []
                },
                {
                    'title': '房源类型',
                    'key': 'type',
                    'isSort': true,
                    'reflexTitle': true,
                    // 'defaultSelectedIndex': 2,
                    'detailList': [
                        {
                            'title': '精品公寓',
                            'value': '1'
                        },
                        {
                            'title': '分散式合租',
                            'value': '2'
                        },
                        {
                            'title': '分散式整租',
                            'value': '3'
                        }
                    ]
                }],
                themeColor: '#000000',
                titleColor: '#666666',
            };
        },
        mounted(){
            uni.$u.http.get('/api.php/house/get_house_small',
                {params: {u_id: uni.getStorageSync('u_id')}}).then(res => {
                for (let i = 0; i < res.length; i++) {
                    this.menuList[0].detailList.push({
                        title:res[i].name,
                        value:res[i].id
                    });
                }
            });
        },
        methods: {
            // 关闭选择器
            closeHandler() {
                if (this.closeOnClickOverlay) {
                    this.$emit('close')
                }
            },
            // 点击工具栏的取消按钮
            cancel() {
                this.$emit('cancel')
            },
            // 点击工具栏的确定按钮
            confirm() {
                this.$emit('confirm', this.collections);
            },
            result(e){
                this.$emit('selectFilter', e);
            },
        },
    }
</script>

<style scoped>
    .content{
        padding: 20rpx 0;
        height: 70vh;
    }
    .u-page__tag-item {
        margin-right: 20px;
    }


    .table {
        border: 0px solid darkgray;
    }
    .tr {
        display: flex;
        width: 100%;
        justify-content: center;
        height: 3rem;
        align-items: center;
    }
    .td {
        width:40%;
        justify-content: center;
        text-align: center;
    }
    .bg-w{
        background: snow;
    }
    .bg-g{
        background: #E6F3F9;
    }
    .th {
        width: 40%;
        justify-content: center;
        background: #3366FF;
        color: #fff;
        display: flex;
        height: 3rem;
        align-items: center;
    }
</style>